<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Developed By M Abdur Rokib Promy">
    <meta name="author" content="cosmic">
    <meta name="keywords" content="Bootstrap 3, Template, Theme, Responsive, Corporate, Business">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>
      Acme | Home
    </title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/flexslider.css"/>
    <link href="assets/bxslider/jquery.bxslider.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/owlcarousel/owl.carousel.css">
    <link rel="stylesheet" href="assets/owlcarousel/owl.theme.css">
    <link rel="stylesheet" href="css/animate.css">
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>



    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
<script src="js/html5shiv.js">
</script>
<script src="js/respond.min.js">
</script>
<![endif]-->
  </head>

  <body>
    <!--header start-->
    <header class="head-section">
      <div class="navbar navbar-default navbar-static-top container">
          <div class="navbar-header">
              <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"
              type="button"><span class="icon-bar"></span> <span class="icon-bar"></span>
              <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html">A
              <span>cme</span></a>
          </div>

          <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                  <li class="dropdown">
                      <a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
                      "dropdown" data-toggle="dropdown" href="index.html">Home <i class="fa fa-angle-down"></i>
                      </a>

                      <ul class="dropdown-menu">
                          <li>
                              <a href="index.html">Home Parallax</a>
                          </li>

                          <li>
                              <a href="index1.html">Home Seq-slider1</a>
                          </li>

                          <li>
                              <a href="index2.html">Home Seq-slider2</a>
                          </li>

                      </ul>
                  </li>

                  <li class="dropdown">
                      <a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
                      "dropdown" data-toggle="dropdown" href="#">Feature <i class="fa fa-angle-down"></i>
                      </a>

                      <ul class="dropdown-menu">
                          <li>
                              <a href="typography.html">Typography</a>
                          </li>

                          <li>
                              <a href="button.html">Buttons</a>
                          </li>

                          <li>
                              <a href="form.html">Form</a>
                          </li>

                          <li>
                              <a href="table.html">Table</a>
                          </li>

                          <li class="dropdown-submenu">
                              <a href="#" tabindex="-1">More options</a>

                              <ul class="dropdown-menu">
                                  <li>
                                      <a href="#" tabindex="-1">Second level</a>
                                  </li>

                                  <li class="dropdown-submenu">
                                      <a href="#">Even More..</a>

                                      <ul class="dropdown-menu">
                                          <li>
                                              <a href="#">3rd level</a>
                                          </li>

                                          <li>
                                              <a href="#">3rd level</a>
                                          </li>
                                      </ul>
                                  </li>

                                  <li>
                                      <a href="#">Second level</a>
                                  </li>

                                  <li>
                                      <a href="#">Second level</a>
                                  </li>
                              </ul>
                          </li>
                      </ul>
                  </li>

                  <li class="dropdown">
                      <a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
                      "dropdown" data-toggle="dropdown" href="#">Pages <i class="fa fa-angle-down"></i>
                      </a>

                      <ul class="dropdown-menu">
                          <li>
                              <a href="about.html">About</a>
                          </li>

                          <li>
                              <a href="404.html">404 page</a>
                          </li>

                          <li>
                              <a href="career.html">career</a>
                          </li>

                          <li>
                              <a href="login.html">Login</a>
                          </li>

                          <li>
                              <a href="registration.html">Registration</a>
                          </li>

                          <li>
                              <a href="faq.html">FAQ</a>
                          </li>

                          <li class="dropdown-submenu">
                              <a href="#" tabindex="-1">Pricing table</a>

                              <ul class="dropdown-menu">
                                  <li class="dropdown-submenu"></li>

                                  <li>
                                      <a href="price-table-one.html">Pricing table one</a>
                                  </li>

                                  <li>
                                      <a href="price-table-two.html">Pricing table two</a>
                                  </li>
                              </ul>
                          </li>

                          <li>
                              <a href="service.html">Service</a>
                          </li>

                          <li>
                              <a href="terms.html">Terms & Condition</a>
                          </li>

                          <li>
                              <a href="privacy.html">Privacy policy</a>
                          </li>
                      </ul>
                  </li>

                  <li class="dropdown">
                      <a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
                      "dropdown" data-toggle="dropdown" href="#">Portfolio <i class="fa fa-angle-down"></i>
                      </a>

                      <ul class="dropdown-menu">
                          <li>
                              <a href="portfolio-3-col.html">Portfolio 3 column</a>
                          </li>

                          <li>
                              <a href="portfolio-4-col.html">Portfolio 4 column</a>
                          </li>

                          <li>
                              <a href="portfolio-single-image.html">Portfolio Single Image</a>
                          </li>

                          <li>
                              <a href="portfolio-single-video.html">Portfolio Single Video</a>
                          </li>
                      </ul>
                  </li>

                  <li class="dropdown">
                      <a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
                      "dropdown" data-toggle="dropdown" href="#">Blog <i class="fa fa-angle-down"></i>
                      </a>

                      <ul class="dropdown-menu">
                          <li>
                              <a href="blog.html">Blog</a>
                          </li>

                          <li>
                              <a href="blog-two-col.html">Blog two column</a>
                          </li>

                          <li>
                              <a href="blog-detail.html">Blog Single Image</a>
                          </li>

                          <li>
                              <a href="blog-detail-video.html">Blog single video</a>
                          </li>
                      </ul>
                  </li>

                  <li>
                      <a href="contact.html">Contact</a>
                  </li>

                  <li><input class="form-control search" placeholder=" Search" type="text"></li>
              </ul>
          </div>
      </div>
    </header>
    <!--header end-->

    <!--breadcrumbs start-->
    <div class="breadcrumbs">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-sm-4">
            <h1>
              Service
            </h1>
          </div>
          <div class="col-lg-8 col-sm-8">
            <ol class="breadcrumb pull-right">
              <li>
                <a href="#">
                  Home
                </a>
              </li>
              <li>
                <a href="#">
                  Pages
                </a>
              </li>
              <li class="active">
                Service
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!--breadcrumbs end-->

    <!--container start-->
    <div class="container">
      <div class="row mar-b-50">
        <div class="col-lg-5">
          <div class="about-carousel wow fadeInLeft">
            <div id="myCarousel" class="carousel slide">
              <!-- Carousel items -->
              <div class="carousel-inner">
                <div class="active item">
                  <img src="img/service3.jpg" alt="">
                  <div class="carousel-caption">
                    <p>
                      Donec luctus ullamcorper nulla
                    </p>
                  </div>
                </div>
                <div class="item">
                  <img src="img/service2.jpg" alt="">
                  <div class="carousel-caption">
                    <p>
                      Blanditiis praesentium voluptatum
                    </p>
                  </div>
                </div>
                <div class="item">
                  <img src="img/service5.jpg" alt="">
                  <div class="carousel-caption">
                    <p>
                      Blanditiis praesentium voluptatum
                    </p>
                  </div>
                </div>

              </div>
              <!-- Carousel nav -->
              <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <i class="fa fa-angle-left">
                </i>
              </a>
              <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <i class="fa fa-angle-right">
                </i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-7 about wow fadeInRight">
          <h3>
            Welcome to Acme
          </h3>
          <p>
            Welcome To Avada
            Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore dolore magnm aliquam quaerat voluptatem.
          </p>
          <p>
            Aenean nibh ante, lacinia non tincidunt nec, lobortis ut tellus. Sed in porta diam. Suspendisse potenti. Donec luctus ullamcorper nulla. Duis nec velit odio.
          </p>
        </div>
      </div>

    </div>

    <div class="gray-box">
      <div class="container">
        <div class="row">
          <div class="text-center feature-head">
            <h1>
              Our Services
            </h1>
            <p>
              Aenean nibh ante, lacinia non tincidunt nec, lobortis ut tellus. Sed in porta diam.
            </p>
          </div>
          <div class="services">
            <div class="col-lg-6 col-sm-6">
              <div class="icon-wrap ico-bg round-five wow zoomIn" data-wow-duration="1.5s" data-wow-delay=".1s">
                <i class="fa fa-desktop">
                </i>
              </div>
              <div class="content">
                <h3 class="title">
                  Responsive Design
                </h3>
                <p>
                  Suspendisse dignissim in sem eget pulvinar. Mauris aliquam nulla at libero pretium, eu tincidunt nulla molestie pulvinar posuere.
                </p>
              </div>
            </div>
            <div class="col-lg-6 col-sm-6">
              <div class="icon-wrap ico-bg round-five wow zoomIn" data-wow-duration="1.5s" data-wow-delay=".3s">
                <i class="fa fa-gift">
                </i>
              </div>
              <div class="content">
                <h3 class="title">
                  HTML5 &amp; CSS3
                </h3>
                <p>
                  Suspendisse dignissim in sem eget pulvinar. Mauris aliquam nulla at libero pretium, eu tincidunt nulla molestie pulvinar posuere.
                </p>
              </div>
            </div>
          </div>
          <div class="services">
            <div class="col-lg-6 col-sm-6">
              <div class="icon-wrap ico-bg round-five wow zoomIn" data-wow-duration="1.5s" data-wow-delay=".5s">
                <i class="fa fa-code">
                </i>
              </div>
              <div class="content">
                <h3 class="title">
                  Friendly Coding
                </h3>
                <p>
                  Suspendisse dignissim in sem eget pulvinar. Mauris aliquam nulla at libero pretium, eu tincidunt nulla molestie pulvinar posuere.
                </p>
              </div>
            </div>
            <div class="col-lg-6 col-sm-6">
              <div class="icon-wrap ico-bg round-five wow zoomIn" data-wow-duration="1.5s" data-wow-delay=".7s">
                <i class="fa fa-book">
                </i>
              </div>
              <div class="content">
                <h3 class="title">
                  Well Documention
                </h3>
                <p>
                  Suspendisse dignissim in sem eget pulvinar. Mauris aliquam nulla at libero pretium, eu tincidunt nulla molestie pulvinar posuere.
                </p>
              </div>
            </div>
          </div>
          <div class="services">
            <div class="col-lg-6 col-sm-6">
              <div class="icon-wrap ico-bg round-five wow zoomIn" data-wow-duration="1.5s" data-wow-delay=".9s">
                <i class="fa fa-bullhorn">
                </i>
              </div>
              <div class="content">
                <h3 class="title">
                  Free Support
                </h3>
                <p>
                  Suspendisse dignissim in sem eget pulvinar. Mauris aliquam nulla at libero pretium, eu tincidunt nulla molestie pulvinar posuere.
                </p>
              </div>
            </div>
            <div class="col-lg-6 col-sm-6">
              <div class="icon-wrap ico-bg round-five wow zoomIn" data-wow-duration="1.5s" data-wow-delay="1.1s">
                <i class="fa fa-eye">
                </i>
              </div>
              <div class="content">
                <h3 class="title">
                  Bootstrap 3
                </h3>
                <p>
                  Suspendisse dignissim in sem eget pulvinar. Mauris aliquam nulla at libero pretium, eu tincidunt nulla molestie pulvinar posuere.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--container end-->
    <div class="container">
      <!--recent work start-->
      <div class="row">
          <div class="col-lg-12 recent">
            <h3 class="recent-work">
              Recent Work
            </h3>
            <p>Some of our work we have done earlier</p>
            <div id="owl-demo" class="owl-carousel owl-theme wow fadeIn">

              <div class="item view view-tenth">
                <img src="img/works/img8.jpg" alt="work Image">
                <div class="mask">
                  <a href="blog-detail.html" class="info" data-toggle="tooltip" data-placement="top" title="Details">
                    <i class="fa fa-link">
                    </i>
                  </a>
                </div>
              </div>
              <div class="item view view-tenth">
                <img src="img/works/img9.jpg" alt="work Image">
                <div class="mask">
                  <a href="blog-detail.html" class="info" data-toggle="tooltip" data-placement="top" title="Details">
                    <i class="fa fa-link">
                    </i>
                  </a>
                </div>
              </div>
              <div class="item view view-tenth">
                <img src="img/works/img10.jpg" alt="work Image">
                <div class="mask">
                  <a href="blog-detail.html" class="info" data-toggle="tooltip" data-placement="top" title="Details">
                    <i class="fa fa-link">
                    </i>
                  </a>
                </div>
              </div>
              <div class="item view view-tenth">
                <img src="img/works/img11.jpg" alt="work Image">
                <div class="mask">
                  <a href="blog-detail.html" class="info" data-toggle="tooltip" data-placement="top" title="Details">
                    <i class="fa fa-link">
                    </i>
                  </a>
                </div>
              </div>
              <div class="item view view-tenth">
                <img src="img/works/img12.jpg" alt="work Image">
                <div class="mask">
                  <a href="blog-detail.html" class="info" data-toggle="tooltip" data-placement="top" title="Details">
                    <i class="fa fa-link">
                    </i>
                  </a>
                </div>
              </div>
              <div class="item view view-tenth">
                <img src="img/works/img13.jpg" alt="work Image">
                <div class="mask">
                  <a href="blog-detail.html" class="info" data-toggle="tooltip" data-placement="top" title="Details">
                    <i class="fa fa-link">
                    </i>
                  </a>
                </div>
              </div>


            </div>
          </div>
        </div>
      <!--recent work end-->
    </div>



    <div class="gray-bg price-container-service">
      <div class="container">


        <div class="row">
          <!--price start-->
          <div class="text-center service-price-one">
            <h1>
              Our service plan
            </h1>

          </div>
          <div class="col-lg-3 col-sm-3 mar-two">
            <div class="pricing-table wow fadeInUp" data-wow-delay=".1s">
              <div class="pricing-head">
                <h1>
                  Standard
                </h1>
                <h2>
                  <span class="note">
                    $
                  </span>
                  150
                </h2>
              </div>
              <ul class="list-unstyled">
                <li>
                  Free setup
                </li>
                <li>
                  Unlimited Bandwidth
                </li>
                <li>
                  2% Transaction fee
                </li>
                <li>
                  1Gb Storage
                </li>
                <li>
                  Private URLs
                </li>
                <li>
                  Enhanced Security
                </li>
              </ul>
              <div class="price-actions">
                <a href="javascript:;" class="btn">
                  Subscribe
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-3 mar-two">
            <div class="pricing-table wow fadeInUp" data-wow-delay=".3s">
              <div class="pricing-head">
                <h1>
                  Professional
                </h1>
                <h2>
                  <span class="note">
                    $
                  </span>
                  200
                </h2>
              </div>
              <ul class="list-unstyled">
                <li>
                  Free setup
                </li>
                <li>
                  Unlimited Bandwidth
                </li>
                <li>
                  1% Transaction fee
                </li>
                <li>
                  5GB Storage
                </li>
                <li>
                  Private URLs
                </li>
                <li>
                  Enhanced Security
                </li>
              </ul>
              <div class="price-actions">
                <a href="javascript:;" class="btn">
                  Subscribe
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-3 mar-two">
            <div class="pricing-table wow fadeInUp" data-wow-delay=".5s">
              <div class="pricing-head">
                <h1>
                  Business
                </h1>
                <h2>
                  <span class="note">
                    $
                  </span>
                  300
                </h2>
              </div>
              <ul class="list-unstyled">
                <li>
                  Free setup
                </li>
                <li>
                  Unlimited Bandwidth
                </li>
                <li>
                  0% Transaction fee
                </li>
                <li>
                  10GBStorage
                </li>
                <li>
                  Private URLs
                </li>
                <li>
                  Enhanced Security
                </li>
              </ul>
              <div class="price-actions">
                <a href="javascript:;" class="btn">
                  Subscribe
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-3 mar-two">
            <div class="pricing-table wow fadeInUp" data-wow-delay=".7s">
              <div class="pricing-head">
                <h1>
                  Enterprise
                </h1>
                <h2>
                  <span class="note">
                    $
                  </span>
                  400
                </h2>
              </div>
              <ul class="list-unstyled">
                <li>
                  Free setup
                </li>
                <li>
                  Unlimited Bandwidth
                </li>
                <li>
                  0% Transaction fee
                </li>
                <li>
                  Unlimited Storage
                </li>
                <li>
                  Private URLs
                </li>
                <li>
                  Enhanced Security
                </li>
              </ul>
              <div class="price-actions">
                <a href="javascript:;" class="btn">
                  Subscribe
                </a>
              </div>
            </div>
          </div>
          <!--price end-->
        </div>


      </div>
    </div>

    <!--footer start-->
    <footer class="footer">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-sm-3 address wow fadeInUp" data-wow-duration="2s" data-wow-delay=".1s">
            <h1>
              contact info
            </h1>
            <address>
              <p>
                <i class="fa fa-home pr-10">
                </i>
                Address: No.XXXXXX street
              </p>
              <p>
                <i class="fa fa-globe pr-10">
                </i>
                Mars city, Country
              </p>
              <p>
                <i class="fa fa-mobile pr-10">
                </i>
                Mobile : (123) 456-7890
              </p>
              <p>
                <i class="fa fa-phone pr-10">
                </i>
                Phone : (123) 456-7890
              </p>
              <p>
                <i class="fa fa-envelope pr-10">
                </i>
                Email :
                <a href="javascript:;">
                  support@example.com
                </a>
              </p>
            </address>
          </div>
          <div class="col-lg-3 col-sm-3 wow fadeInUp" data-wow-duration="2s" data-wow-delay=".3s">
            <h1>
              latest tweet
            </h1>
            <div id="owl-slide">
              <div class="tweet-box">
                <i class="fa fa-twitter">
                </i>
                <em>
                  Please follow
                  <a href="javascript:;">
                    @example
                  </a>
                  for all future updates of us!
                  <a href="javascript:;">
                    twitter.com/acme
                  </a>
                </em>
              </div>
              <div class="tweet-box">
                <i class="fa fa-twitter">
                </i>
                <em>
                  Please follow
                  <a href="javascript:;">
                    @example
                  </a>
                  for all future updates of us!
                  <a href="javascript:;">
                    twitter.com/acme
                  </a>
                </em>
              </div>
              <div class="tweet-box">
                <i class="fa fa-twitter">
                </i>
                <em>
                  Please follow
                  <a href="javascript:;">
                    @example
                  </a>
                  for all future updates of us!
                  <a href="javascript:;">
                    twitter.com/acme
                  </a>
                </em>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-3">
            <div class="page-footer wow fadeInUp" data-wow-duration="2s" data-wow-delay=".5s">
              <h1>
                Our Company
              </h1>
              <ul class="page-footer-list">

                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="about.html">
                    About Us
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="faq.html">
                    Support
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="service.html">
                    Service
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="privacy-policy.html">
                    Privacy Policy
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="career.html">
                    We are Hiring
                  </a>
                </li>
                <li>
                  <i class="fa fa-angle-right">
                  </i>
                  <a href="terms.html">
                    Term & condition
                  </a>
                </li>

              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-sm-3">

            <div class="text-footer wow fadeInUp" data-wow-duration="2s" data-wow-delay=".7s">
              <h1>
                Text Widget
              </h1>
              <p>
                This is a text widget.Lorem ipsum dolor sit amet.
                This is a text widget.Lorem ipsum dolor sit amet
              </p>
            </div>
          </div>

        </div>

      </div>
    </footer>
    <!-- footer end -->
    <!--small footer start -->
    <footer class="footer-small">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-sm-6 pull-right">
                    <ul class="social-link-footer list-unstyled">
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".1s"><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".2s"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".3s"><a href="#"><i class="fa fa-dribbble"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".4s"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".5s"><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".6s"><a href="#"><i class="fa fa-skype"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".7s"><a href="#"><i class="fa fa-github"></i></a></li>
                        <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".8s"><a href="#"><i class="fa fa-youtube"></i></a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                  <div class="copyright"> <p>&copy; Copyright - Acme Theme by cosmic.More Templates</p>
                  </div>
                </div>
            </div>
        </div>
    </footer>
    <!--small footer end-->

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js">
    </script>
    <script src="js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src="js/hover-dropdown.js">
    </script>
    <script src="assets/owlcarousel/owl.carousel.js">
    </script>

    <script type="text/javascript" src="assets/bxslider/jquery.bxslider.js">
    </script>
    <script defer src="js/jquery.flexslider.js">
    </script>

    <script src="js/jquery.easing.min.js">
    </script>
    <script src="js/link-hover.js">
    </script>


    <!--common script for all pages-->
    <script src="js/common-scripts.js">
    </script>
    <script src="js/wow.min.js">
    </script>
    <script>
      wow = new WOW(
        {
          boxClass:     'wow',      // default
          animateClass: 'animated', // default
          offset:       0          // default
        }
      )
        wow.init();
    </script>


    <script>



      $(window).load(function() {
        $('[data-zlname = reverse-effect]').mateHover({
          position: 'y-reverse',
          overlayStyle: 'rolling',
          overlayBg: '#fff',
          overlayOpacity: 0.7,
          overlayEasing: 'easeOutCirc',
          rollingPosition: 'top',
          popupEasing: 'easeOutBack',
          popup2Easing: 'easeOutBack'
        }
                                                     );
      }
                    );

      $(window).load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          start: function(slider) {
            $('body').removeClass('loading');
          }
        }
                                   );
      }
                    );

      $(document).ready(function() {

        $("#owl-demo").owlCarousel({
          items : 4,
        }
                                  );

      }
                       );




      $(window).scroll(function() {
        $('#skillz').each(function(){
          var imagePos = $(this).offset().top;
          var viewportheight = window.innerHeight;
          console.log(viewportheight);
          var topOfWindow = $(window).scrollTop();
          if (imagePos < topOfWindow+viewportheight) {
            $('.skill_bar').fadeIn('slow');
            $('.skill_one').animate({
              width:'60%'}
                                    , 2000);
            $('.skill_two').animate({
              width:'90%'}
                                    , 2000);
            $('.skill_three').animate({
              width:'70%'}
                                      , 1000);
            $('.skill_four').animate({
              width:'55%'}
                                     , 1000);
            $('.skill_bar_progress p').fadeIn('slow',function(){

            }
                                             );
          }
        }
                         );
      }
                      );


    </script>

  </body>
</html>
